<template>
  <div class="upload-progress" v-if="progressItems.length > 0">
    <div class="progress-header">
      <h3 class="progress-title">上传进度</h3>
      <div class="progress-actions">
        <el-button 
          type="primary" 
          size="small"
          :disabled="!hasPendingItems"
          @click="$emit('upload-all')"
        >
          <el-icon><Upload /></el-icon>
          全部上传
        </el-button>
        <el-button 
          size="small"
          @click="$emit('clear-all')"
        >
          <el-icon><Delete /></el-icon>
          清空列表
        </el-button>
      </div>
    </div>
    
    <div class="progress-list">
      <div 
        v-for="(item, index) in progressItems" 
        :key="index"
        class="progress-item"
        :class="[`status-${item.status}`]"
      >
        <div class="item-info">
          <div class="item-icon">
            <el-icon v-if="item.status === 'pending'" class="icon-pending">
              <Clock />
            </el-icon>
            <el-icon v-else-if="item.status === 'uploading'" class="icon-uploading">
              <Loading />
            </el-icon>
            <el-icon v-else-if="item.status === 'success'" class="icon-success">
              <CircleCheck />
            </el-icon>
            <el-icon v-else-if="item.status === 'error'" class="icon-error">
              <CircleClose />
            </el-icon>
          </div>
          
          <div class="item-details">
            <div class="item-name">{{ item.file.name }}</div>
            <div class="item-meta">
              <span class="file-size">{{ formatFileSize(item.file.size) }}</span>
              <span class="file-type">{{ getFileType(item.file.type) }}</span>
              <span v-if="item.status === 'error' && item.error" class="error-message">
                {{ item.error }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="item-progress">
          <div v-if="item.status === 'uploading'" class="progress-bar-container">
            <el-progress 
              :percentage="item.progress" 
              :show-text="false"
              :stroke-width="6"
              color="#409eff"
            />
            <span class="progress-text">{{ item.progress }}%</span>
          </div>
          
          <div v-else-if="item.status === 'success'" class="status-text success">
            上传成功
          </div>
          
          <div v-else-if="item.status === 'error'" class="status-text error">
            上传失败
          </div>
          
          <div v-else class="status-text pending">
            等待上传
          </div>
        </div>
        
        <div class="item-actions">
          <el-button 
            v-if="item.status === 'error'"
            type="primary" 
            size="small"
            @click="$emit('retry', item, index)"
          >
            <el-icon><Refresh /></el-icon>
            重试
          </el-button>
          
          <el-button 
            v-if="item.status === 'success'"
            type="success" 
            size="small"
            @click="$emit('view', item)"
          >
            <el-icon><View /></el-icon>
            查看
          </el-button>
          
          <el-button 
            size="small"
            @click="$emit('remove', item, index)"
          >
            <el-icon><Close /></el-icon>
            移除
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 统计信息 -->
    <div class="progress-summary">
      <div class="summary-stats">
        <span class="stat-item">
          <el-icon><Files /></el-icon>
          总计: {{ progressItems.length }}
        </span>
        <span class="stat-item success" v-if="successCount > 0">
          <el-icon><CircleCheck /></el-icon>
          成功: {{ successCount }}
        </span>
        <span class="stat-item error" v-if="errorCount > 0">
          <el-icon><CircleClose /></el-icon>
          失败: {{ errorCount }}
        </span>
        <span class="stat-item pending" v-if="pendingCount > 0">
          <el-icon><Clock /></el-icon>
          等待: {{ pendingCount }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Upload, Delete, Clock, Loading, CircleCheck, CircleClose, 
  Refresh, View, Close, Files 
} from '@element-plus/icons-vue'
import type { UploadProgress } from '@/types'

// Props
interface Props {
  progressItems: UploadProgress[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'upload-all': []
  'clear-all': []
  'retry': [item: UploadProgress, index: number]
  'view': [item: UploadProgress]
  'remove': [item: UploadProgress, index: number]
}>()

// Computed
const successCount = computed(() => 
  props.progressItems.filter(item => item.status === 'success').length
)

const errorCount = computed(() => 
  props.progressItems.filter(item => item.status === 'error').length
)

const pendingCount = computed(() => 
  props.progressItems.filter(item => item.status === 'pending').length
)

const hasPendingItems = computed(() => 
  props.progressItems.some(item => item.status === 'pending' || item.status === 'error')
)

// Methods
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const getFileType = (mimeType: string): string => {
  const typeMap: Record<string, string> = {
    'image/jpeg': 'JPEG',
    'image/jpg': 'JPG',
    'image/png': 'PNG',
    'image/gif': 'GIF',
    'image/webp': 'WebP'
  }
  return typeMap[mimeType] || 'Unknown'
}
</script>

<style scoped>
.upload-progress {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.progress-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.progress-actions {
  display: flex;
  gap: 8px;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.progress-item.status-success {
  border-color: #67c23a;
  background: #f0f9ff;
}

.progress-item.status-error {
  border-color: #f56c6c;
  background: #fef0f0;
}

.progress-item.status-uploading {
  border-color: #409eff;
  background: #ecf5ff;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.icon-pending { color: #909399; }
.icon-uploading { color: #409eff; }
.icon-success { color: #67c23a; }
.icon-error { color: #f56c6c; }

.item-details {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.error-message {
  color: #f56c6c;
  font-weight: 500;
}

.item-progress {
  flex-shrink: 0;
  min-width: 120px;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-container :deep(.el-progress) {
  flex: 1;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 35px;
  text-align: right;
}

.status-text {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status-text.success { color: #67c23a; }
.status-text.error { color: #f56c6c; }
.status-text.pending { color: #909399; }

.item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.progress-summary {
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.summary-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.stat-item.success { color: #67c23a; }
.stat-item.error { color: #f56c6c; }
.stat-item.pending { color: #909399; }

@media (max-width: 768px) {
  .upload-progress {
    padding: 16px;
  }
  
  .progress-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .progress-actions {
    justify-content: center;
  }
  
  .progress-item {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .item-info {
    gap: 8px;
  }
  
  .item-meta {
    flex-direction: column;
    gap: 4px;
  }
  
  .item-actions {
    justify-content: center;
  }
  
  .summary-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
}
</style>